<template>
<view>
<!--cart4.wxml-->
<view class="order-list pd-bg-fff">
    <view class="order-id">
        <view class="order-weight">订单号</view>
        <view class="co-red">{{order.order_sn}}</view>
    </view>
    <view class="order-price">
        <view class="order-weight">订单金额</view>
        <view class="co-red">¥{{order.order_amount}}</view>
    </view>
</view>
<view class="pay-way pd-bg-fff">
    <view class="title">支付方式</view>
 <radio-group class="radio-group" @change="radioChange">
        <view v-for="(item, index) in pay_type" :key="index" class="pay-item">
                 <label>
                        <view>                          
                            <radio class="check" :value="index" :data-code="item.pay_code" :checked="item.checked"></radio>
                        </view>
                    </label>
            <view class="pay-img"><image class="wh100" :src="item.logo"></image></view>
            <view style="display: flex;">
                    <view>{{item.name}}</view>
                    <view class="balace" v-if="index == 0">( 余额：¥ {{userInfo.user_money}} )</view>
            </view>
            
        </view>
    </radio-group>
    <view class="pay-now" @tap="payment">立即支付</view>
</view>


<view v-if="balace" class="balace-bgc">
    <view class="password">
        <view @tap.stop="cancel" class="cancel">X</view>
        <view class="text">请输入支付密码</view>
        <view style="padding-top:1rem;"><input type="password" class="password-input" @input="inputPassword" placeholder="输入支付密码"></input></view>
        <view class="submit"><button class="paiton" @tap.stop="balacePay">确定</button></view>
    </view>
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var pay = require("../../../utils/pay.js");
var util = require("../../../utils/util.js");
var md5 = require("../../../utils/md5.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      order: {},
      order_type: 0,
      //订单类型 0:普通 4:预售 5:虚拟订单 6:拼团订单 9 自提 7预约
      pay_type: [{
        'name': '余额支付',
        'checked': false,
        'logo': "/static/images/balace_pay.png",
        'pay_code': ''
      }, {
        'name': '微信支付',
        'checked': true,
        'logo': "/static/images/wx-pay.png",
        'pay_code': ''
      }],
      selected: 1,
      balace: false,
      password: '',
      userInfo: {
        user_money: 0
      },
      foundId: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      });
    }, true, false);
    var order_type = typeof options.order_type == 'undefined' ? 0 : options.order_type;

    if (order_type == 9 || order_type == 1 || order_type == 6 || order_type == 5 || order_type == 7 || order_type == 4) {
      let pay_type = [{
        'name': '余额支付',
        'checked': true,
        'logo': "/static/images/balace_pay.png",
        'pay_code': ''
      }, {
        'name': '微信支付',
        'checked': false,
        'logo': "/static/images/wx-pay.png",
        'pay_code': ''
      }];
      that.setData({
        pay_type: pay_type
      });
    } else {
      request.get('/api/cart/codPay', {
        failRollback: true,
        success: function (res) {
          if (res.data.result == 1) {
            that.setData({
              pay_type: [{
                'name': '余额支付',
                'checked': true,
                'logo': "/static/images/balace_pay.png",
                'pay_code': ''
              }, {
                'name': '微信支付',
                'checked': false,
                'logo': "/static/images/wx-pay.png",
                'pay_code': ''
              }, {
                'name': '货到付款',
                'checked': false,
                'logo': "/static/images/self-pay.png",
                'pay_code': ''
              }]
            });
          }
        }
      });
    }

    that.setData({
      order_type: order_type,
      foundId: options.found_id ? options.found_id : 0
    });

    if (options.order_sn) {
      request.get('/api/cart/cart4', {
        data: {
          order_sn: options.order_sn
        },
        failRollback: true,
        success: function (res) {
          var order_amount = res.data.result.order_amount;

          if (parseFloat(order_amount) < 0.01) {
            that.jumpSuccess();
          }

          that.setData({
            order: {
              order_id: res.data.result.order_id,
              order_sn: options.order_sn,
              order_amount: order_amount
            }
          });
        }
      });
    } else {
      if (parseFloat(options.order_amount) < 0.01) {
        this.jumpSuccess();
      }

      this.setData({
        order: options
      });
    }
  },
  methods: {
    radioChange(e) {
      this.setData({
        selected: e.detail.value
      });
    },

    payment: function () {
      var that = this;

      if (this.order && parseFloat(this.order.order_amount) < 0.01) {
        this.jumpSuccess();
        return;
      }

      if (that.selected == 0) {
        //余额支付
        if (that.userInfo.user_money - that.order.order_amount < 0) {
          return app.globalData.showTextWarining('余额不足,请充值!');
        } else {
          that.setData({
            balace: true
          });
        }
      } else if (that.selected == 1) {
        //微信支付
        pay.pay(this.order.order_sn, function () {
          that.jumpPaymentPage();
        });
      } else if (that.selected == 2) {
        //货到付款
        pay.cash_delivery(this.order.order_id, function () {
          that.jumpPaymentPage();
        });
      }
    },
    jumpSuccess: function () {
      var that = this;
      app.globalData.showSuccess('下单成功', function () {
        if (that.order_type == 5) {
          uni.redirectTo({
            url: '/pages/virtual/virtual_list/virtual_list'
          });
        } else if (that.order_type == 6) {
          // wx.redirectTo({ url: '/pages/team/team_order/team_order' });
          uni.redirectTo({
            url: 'pages/team/team_detail/team_detail?order_id='.that.data.order.order_id
          });
        } else if (that.order_type == 8) {
          uni.redirectTo({
            url: 'pages/Bargain/order_list/order_list'
          });
        } else {
          var pages = getCurrentPages();

          if (pages[pages.length - 2].route == 'pages/cart/cart/cart') {
            //前一个页面是购物车页，则跳到待发货页
            uni.redirectTo({
              url: '/pages/user/order_list/order_list?type=2'
            });
          } else {
            uni.setStorageSync('order:order_list:update', true);
            uni.setStorageSync('order:order_detail:update', true);
            uni.navigateBack();
          }
        }
      });
    },
    jumpPaymentPage: function () {
      if (6 == this.order_type) {
        //拼团订单直接跳到拼团详情页,暂时弃用跳转到支付成功页面
        if (this.order.found_id > 0) {
          uni.redirectTo({
            url: '/pages/team/team_detail/team_detail?foundId=' + this.foundId
          });
        } else {
          uni.redirectTo({
            url: '/pages/team/team_detail/team_detail?order_id=' + this.order.order_id + '&foundId=' + this.foundId
          });
        }
      } else {
        uni.redirectTo({
          url: '/pages/payment/payment/payment?order_sn=' + this.order.order_sn + '&order_amount=' + this.order.order_amount + '&order_type=' + this.order_type + '&order_id=' + this.order.order_id + '&found_id=' + this.foundId
        });
      }
    },
    cancel: function () {
      this.setData({
        balace: false
      });
    },
    balacePay: function () {
      var that = this;

      if (!that.password) {
        return app.globalData.showTextWarining('密码不能为空!');
      }

      if (that.password.length < 6) {
        return app.globalData.showTextWarining('密码错误');
      }

      request.post('/api/Payment/balancePay', {
        data: {
          order_sn: that.order.order_sn,
          password: md5('TPSHOP' + that.password)
        },
        failRollback: false,
        successReload: true,
        success: function (res) {
          if (res.data.status == 1) {
            app.globalData.showSuccess(res.data.msg, function () {
              that.jumpPaymentPage();
            });
          } else if (res.data.status == -101) {
            app.globalData.showTextWarining(res.data.msg, function () {
              uni.reLaunch({
                url: '/pages/index/index/index'
              });
            });
          } else if (res.data.status == -1) {
            app.globalData.showTextWarining(res.data.msg, function () {
              uni.navigateTo({
                url: '/pages/user/userinfo_edit/userinfo_edit?type=paypwd'
              });
            });
          } else {
            app.globalData.showTextWarining(res.data.msg);
          }
        }
      });
    },
    inputPassword: function (e) {
      this.setData({
        password: e.detail.value
      });
    }
  }
};
</script>
<style>
/* cart4.wxss */
page{
  background-color: #f5f5f5;
}
.wx-radio-input{
   border-radius: 50%;/* 圆角 */
} 
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background-color: red!important;
}
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   height: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
   line-height: 30rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#ffffff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

.spec-model{
    display: none !important;
}
.order-list{
    margin-bottom: 20rpx;
    padding: 0 35rpx;
    background: #fff;
}
.order-list>view{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96rpx;
    font-size: 30rpx;
    color: #444;
    border-bottom: 2rpx solid #f3f3f3;
}
.order-weight{
    font-weight: bold;
}
.title{
    height: 70rpx;
    line-height: 70rpx;
    font-size: 30rpx;
    color: #444;
    font-weight: bold;
}
.pay-way{
    padding-bottom: 150rpx;
    background: #fff;
}
.pay-item{
    display: flex;
    height: 100rpx;
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    font-size: 28rpx;
    color: #444;
    padding-left: 25rpx;
}
.pay-item .check{
    transform:scale(.8);
    box-sizing:border-box;
    border:2rpx solid #fff;
    width:60rpx;
}
.pay-img{
    width: 68rpx;
    height: 68rpx;
    margin: 0 20rpx;
}
.pay-now{
    width: 680rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin: 150rpx auto 0;
    background-color:#ff6a00;
    color: #fff;
    border-radius: 10rpx;
}
.balace-bgc{
    position: fixed;
    margin: 0 auto;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(0,0,0,0.4);
}
.balace-bgc .password{
    background-color: white;
    bottom: 0px;
    position: fixed;
    height: 9rem;
    width: 100%;
}
.balace-bgc .cancel{
    float: right;
    margin-right: 20px;
    margin-top: 5px;
    font-size: .8rem;
}
.balace-bgc .text{
    text-align:center;
    margin-top:40rpx;
    font-size:.777rem;
}

.balace-bgc .password-input {
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    height: 1.7777rem;
    font-size: 0.68888rem;
    border: 1px solid #f3f3f3;
}
.balace-bgc .submit{
    padding-top: 3.28rem;
}

.balace-bgc .paiton {
    height: 1.87733rem;
    width: 95%;
    display: block;
    text-align: center;
    line-height: 1.87733rem;
    background-color: #ff6a00;
    font-size: .68267rem;
    color: white;
    border-radius: .21333rem;
}
.balace{
    font-size: 0.54rem;
    color: #999;
    margin-left:15px;
    margin-top:6rpx;
}
</style>